<template>
  <div class="article">
    <div class="aMain">
      <el-row>
        <el-col :span="20">
          <div class="dtcontent">
            <ul>
              <li v-for="(item, i) in 10" :key="i">li-L-{{ item }}</li>
            </ul>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="dtcontent">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>卡片名称</span>
                <el-button style="float: right; padding: 3px 0" type="text"
                  >操作按钮</el-button
                >
              </div>
              <div v-for="o in 4" :key="o" class="text item">
                {{ "列表内容 " + o }}
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Article",
  data() {
    return {
      msg: "this is article info",
    };
  },
};
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.article {
  background-color: #e9eef3;
}

.aMain {
  width: 80%;
  margin: 2em auto;
}

.dtcontent {
  width: 95%;
  height: auto;
  margin: 1em auto;
  background-color: #ffffff;
  border-radius: 1em;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 1em;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>
